"use client";
import type { PagerConfig } from "@/type";
import { useRouter } from "next/navigation";
type Props = {
  pageConfig: PagerConfig;
};

export default function Pager({ pageConfig }: Props) {
  const router = useRouter();
  let { page = 1 } = pageConfig || {};
  const { pageSize = 10, total } = pageConfig || {};

  function switchPage(type: string) {
    switch (type) {
      case "previous":
        if (page === 1) {
          return;
        }
        page--;
        break;
      case "next":
        page++;
        break;
    }
    router.push(`/diarys?page=${page}`);
  }

  return (
    <div className="flex select-none text-base md:text-lg">
      {page !== 1 && (
        <div
          className="mr-10 md:mr-20 cursor-pointer"
          onClick={() => switchPage("previous")}
        >
          ⬅️上一页
        </div>
      )}
      <div className="mr-2">第 {page} 页</div>
      {page * pageSize < total && (
        <div
          className="ml-10 md:ml-20 mr-2 cursor-pointer"
          onClick={() => switchPage("next")}
        >
          下一页➡️
        </div>
      )}
    </div>
  );
}
